<template>
  <div class="container">
    <el-form :inline="true" :model="queryForm" ref="queryForm" size="small">
      <el-form-item>
        <el-input v-model="queryForm.opUser" placeholder="操作用户" autocomplete="off" style="width: 120px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="queryForm.module" placeholder="操作模块" autocomplete="off" style="width: 120px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="queryForm.type" style="width: 100px;">
          <el-option v-for="item in typeSelect" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="queryForm.status" style="width: 100px;">
          <el-option v-for="item in statusSelect" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="queryForm.dateRange" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" @change="datePickerChange"></el-date-picker>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="primary" icon="el-icon-search" round @click="query()" >搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%;" border :height="countHeight" size="small" v-loading="tableLoading">
      <el-table-column align="center" prop="logModule" label="操作模块" width="120"></el-table-column>
      <el-table-column align="center" prop="logType" label="操作类型" width="90">
        <template slot-scope="scope">
          <span v-html="typeSelect[scope.row.logType + 1].label"></span>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" prop="logType" label="操作类型" width="120"></el-table-column>-->
      <el-table-column align="center" prop="okFlag" label="结果状态" width="90">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.okFlag === 1" size="small" type="success" effect="dark">成功</el-tag>
          <el-tag v-else size="small" type="danger" effect="dark">失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="logDesc" label="操作内容" show-overflow-tooltip min-width="340">
        <template slot-scope="scope">
          <span v-html="scope.row.logDesc"></span>
          <span v-if="scope.row.okFlag === 0">：<span v-html="scope.row.failMsg"></span></span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="operatorName" label="操作人/账号"></el-table-column>
      <el-table-column align="center" prop="createTime" label="操作时间" width="160"></el-table-column>
      <el-table-column align="center" label="操作" width="120">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.logType > 0 && scope.row.logType < 6" content="查看详情" placement="top">
            <el-button size="mini" icon="el-icon-search" circle @click="handleDetail(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      width="100%"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <dialog-log-detail ref="dialogLogDetail"></dialog-log-detail>
  </div>
</template>
<script>
  import { dateFormat } from '@/utils/string'
  import logDetailDialog from './dialog/logDetailDialog.vue'
  import { isAuth } from '@/utils'

  export default {
    name: 'zb-log',
    data () {
      return {
        tableLoading: false,
        queryForm: {
          opUser: '',
          type: '',
          status: '',
          module: '',
          dateRange: null
        },
        typeSelect:[
          {value: '',label: '全部类型'},
          {value: 0, label: '登录'},
          {value: 1, label: '新增'},
          {value: 2, label: '修改'},
          {value: 3, label: '删除'},
          {value: 4, label: '授权'},
          {value: 5, label: '取消授权'},
          {value: 6, label: '停用'},
          {value: 7, label: '启用'},
          {value: 8, label: '用户上锁'},
          {value: 9, label: '用户解锁'}
        ],
        statusSelect: [
          {value: '',label: '全部状态'},
          {value: 0, label: '失败'},
          {value: 1, label: '成功'}
        ],
        tableData: [],
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0
      }
    },
    computed: {
      countHeight() {
        return window.screen.availHeight - 320
      }
    },
    activated () {
      this.getDataList()
    },
    methods:{
      getDataList() {
        if (!isAuth('monitor:log:view')) {
          return
        }

        let startTime= '', endTime = ''
        if (this.queryForm.dateRange !== null) {
          startTime = dateFormat(this.queryForm.dateRange[0])
          endTime = dateFormat(this.queryForm.dateRange[1])
        }
        const query = {
          page: this.pageIndex,
          limit: this.pageSize,
          opUser: this.queryForm.opUser,
          module: this.queryForm.module,
          type: this.queryForm.type,
          status: this.queryForm.status,
          startTime: startTime,
          endTime: endTime
        }
        this.tableLoading = true
        // logType logModule batchFlag returnFlag okFlag operatorName beginTime endTime
        this.$http({
          url: this.$http.adornUrl('/monitor/log/list'),
          method: 'get',
          params: {
            query: this.$http.adornParams(query)
          }
        }).then(response => {
          const result = response.data
          if (result && result.code === 200) {
            const data = result.data
            this.tableData = data.dataList
            this.totalPage = data.total
          } else {
            this.$message({message: result.msg, type: 'error'})
          }
          this.tableLoading = false
        }).catch((reason) => {
          this.tableLoading = false
          this.$message({message: reason, type: 'error'})
        })
      },
      query(){
        this.pageIndex = 1
        this.pageSize = 20
        this.getDataList()
      },
      handleDetail(data){
        this.$nextTick(() => {
          this.$refs['dialogLogDetail'].init(data)
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getDataList()
      },
      handleCurrentChange(val) {
        this.pageIndex = val
        this.getDataList()
      },
      datePickerChange(value) {
        if(value === null) {
          this.queryForm.dateRange = null
        }
      }
    },
    components: {
      'dialog-log-detail' : logDetailDialog
    }
  }
</script>
<style>
</style>
